<template>
    <!-- 随堂练习批阅 -->
    <div id="marking-practice-watch7">
        <div class="preview-top">
            <div class="preview-top1">
                <div class="preview-top-content">
                <div v-if="queryData">
                    <span class="preview-title">{{ queryData.courseName }}</span>
                    <span class="preview-line">/</span>
                    <span>{{ queryData.chapterName }}</span>
                    <span>姓名：{{ queryData.userName }}</span>
                    <span>学号：{{ queryData.userNumber }}</span>
                </div>
                </div>
            </div>
        </div>
        <div class="jx-content">
            <div v-if="topData.length">
                <div class="content-top">
                    <span v-for="(item,index) in topData" :key="index">
                        <span style="font-weight:normal;">/</span>
                        <span @click="backData(item,index)">{{ item.label }}</span>
                    </span>
                    <span v-if="textName">
                        <span style="font-weight:normal;">/</span> {{ textName }}
                    </span>
                </div>
            </div>
            <div v-if="!isShowText">
                <div v-if="data.length">
                    <el-table
                        row-key="label"
                        class="mpw-table"
                        :data="tableData"
                        @cell-click="nextData"
                        style="width: 100%">
                        <el-table-column
                            label="文件夹名称">
                            <template slot-scope="scope">
                                <div class="wenjian-name">
                                    <i v-if="scope.row.hasOwnProperty('children')" class="iconfont icon-wenjianjia"></i>
                                    <i v-else class="iconfont icon-wenjian"></i>
                                    {{ scope.row.label }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="文件更新时间"
                            width="180">
                            <span>{{ queryData.time }}</span>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="text-content" v-else>
                <div v-for="(item,index) in textData" :key="index">
                    <div>{{ item }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from "axios";
    import $ from "jquery";
    export default {
        data() {
            return {
                queryData:"",
                data:"",
                tableData: "",
                topData:[],
                textData:[],
                textName:"",
                isShowText:false
            };
        },
        created() {
            let that = this;
            that.queryData = this.$route.query;
        },
        mounted() {
            this.init();
        },
        methods:{
            init(){
                console.log(this.queryData);
                this.getData();
            },
            nextData(row, column, cell, event){
                let that = this;
                if(row.hasOwnProperty("children")){
                    that.tableData = row.children;
                    that.topData.push(row);
                }
                else{
                    that.getText(row);
                }
            },
            backData(item,index){
                let that = this;
                console.log(item,index);
                that.tableData = item.children;
                console.log(that.tableData);
                that.topData.splice(index + 1);
                
                that.textData = [];
                that.textName = "";
                that.isShowText = false;
            },
            getData() {
                var that = this;
                console.log(that.queryData,123);
                axios.get(
                    "/tes/course/"+ that.queryData.courseId + "/chapter/" + that.queryData.chapterId + "/practice/view?userNumber=" + that.queryData.userNumber + "&fileName=" + that.queryData.fileName + "&id=" + that.queryData.id
                    ).then(function(res) {
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            console.log(res.data.data,1);
                            that.data = res.data.data;
                            that.tableData = that.data;
                            let a = {
                                label:that.data[0].label,
                                children:that.data
                            }
                            that.topData.push(a);
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            },
            getText(row){
                var that = this;
                let path = that.topData.map(item => item.label);
                path.splice(0,1);
                path = "/" + path.join("/") + "/" + row.label;
                axios.get(
                    "/tes/course/"
                    + that.queryData.courseId 
                    + "/chapter/" 
                    + that.queryData.chapterId 
                    + "/practice/read?userNumber=" + that.queryData.userNumber 
                    + "&fileName=" + that.queryData.fileName 
                    + "&id=" + that.queryData.id
                    + "&path=" + path
                    ).then(function(res) {
                    if (res.status === 200) {
                        if (res.data.code === 200) {
                            console.log(res,1);
                            that.textName = row.label;
                            that.isShowText = true;
                            that.textData = res.data.data;
                        } else {
                            that.$message({
                                message: res.data.message,
                                type: "error"
                            });
                        }
                    }
                }).catch(function(err) {
                    if (err.response) {
                        console.log(err.response);
                    }
                });
            }
        },
    };
</script>
<style lang="scss">
    @import "../../../styles/layout/color_variables";
    body {
        background: #f8f8f8;
    }
    #marking-practice-watch7 {
        .el-table__expand-icon{
            display:none;
        }
        .text-content{
            min-height:200px;
            border:1px solid #d9d9d9;
            margin:52px 0px;
            padding:10px;
            border-radius: 4px;
        }
        .mpw-table{
            tr{
                &:hover{
                    td{
                        color:rgb(18, 119, 235);
                    }
                }
            }
            td{
                font-size: 14px;
                color: #8e8e8e;
                cursor: pointer;
                .iconfont{
                    font-size: 16px;
                    margin-right:4px;
                }
            }
            .wenjian-name{
                text-align: left;
            }
        }
        .content-top{
            color:#474747;
            font-size: 14px;
            >span > span{
                cursor: pointer;
            }
            > span:last-child{
                font-weight: bold;
            }
        }
        .iconright{
            font-size:16px; 
            color:#29a794; 
            margin-left:8px;
        }
        .iconwrong{
            font-size:14px; 
            color:#ff4240; 
            margin-left:8px;
        }
        .correct{
            font-size: 14px;
            color:#1277eb;
            border:1px solid #1277eb;
            padding:0px 2px;
            margin-left:10px;
            cursor: pointer;
        }
        .analysis-box{
            .analysis-title{
                color:#474747;
                font-weight: bold;
            }
            .analysis-content{
                color:#474747;
            }
        }
        //归档显示
        .showicon{
            display: none;
            .showicon-right{
                font-size:24px; 
                color:#29a794; 
                margin-left:8px;
            }
            .showicon-wrong{
                font-size:24px; 
                color:#ff4240; 
                margin-left:8px;
            }
        }
        //190717
        background: #f8f8f8;
        .stu-answer{
        }
        .markdown-body {
            font-size: 14px !important;
        }

        img{
            max-width:100%;
        }
        .underline {
            text-decoration: underline;
        }
        .font16 {
            font-size: 16px;
            line-height: 40px;
        }
        //选择题答案下划线
        .chose-item {
        }
        .question-score {
            .el-input {
                width: auto;
                .el-input__inner {
                    width: 58px;
                }
            }
        }
        .preview-top {
            position: relative;
            z-index: 1;
            height: 120px;
            margin: 0px auto 0;
            .preview-top1 {
                width: 100%;
                height: 60px;
                line-height: 60px;
                background: #101937;
                position: fixed;
                top: 0;
                color: #fff;
                font-size: 14px;
                .preview-top-content {
                    width: 1200px;
                    margin: 0 auto;
                    span {
                        margin-right: 40px;
                    }
                    .preview-title {
                        font-size: 18px;
                        margin-right: 0;
                    }
                    .preview-line {
                        margin: 0 6px;
                    }
                }
            }
            .preview-top2 {
                margin-top:0;
                width: 100%;
                line-height: 80px;
                position: fixed;
                top: 60px;
                padding: 0;
                font-size: 14px;
                .preview-top-content {
                    width: 1200px;
                    margin: 0 auto;
                    padding: 0 40px;
                    .button-style {
                        margin-left: 20px;
                    }
                    .download-pdf{
                        float: left;
                        cursor: pointer;
                    }
                }
                .preview-top-content2 {
                    width: 1200px;
                    margin: 0 auto;
                    line-height: 30px;
                    padding-bottom: 30px;
                }
            }
        }
        .preview-content {
            width: 1200px;
            margin: 40px auto 20px;
            color: $title-gray;
            padding: 0 40px;
            overflow: hidden;
            // box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            box-shadow: 0 0 0 rgba(0, 0, 0, 0);
            p {
                display: inline;
            }
            .tq-title {
                color: $title-gray;
                font-size: 16px;
                line-height: 40px;
            }
            dl {
                padding-left: 20px;
            }
            dt,dd {
                font-size: 14px;
                //190717
                line-height: 24px;
                //190717
            }
                //190717
            dt {
                margin-bottom: 20px;
            }
            //190717
            dd {
                padding-left: 20px;
            }
            .btn-group {
                text-align: center;
                .button-style {
                    margin: 40px 5px;
                }
            }
        }
        .question-assess{
            // overflow: hidden;
            height: 150px;
            margin-top: 20px;
            margin-bottom: 45px;
            .title{
                // float: left;
                width: 4%;
                display: inline-block;
                vertical-align: top;
                font-size: 16px;
                color: #385899;
            }
            .el-textarea{
                // float: left;
                width: 90%;
                height: 150px;
                textarea{
                    resize:none;
                }
            }
        }
    }
</style>
